<template>
  <div>
    <el-container>
      <el-main>
        <div>
          <el-row>
            <el-col :span="24">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first">





                  <div class="a" v-for="item in article" :key="item.id">
          <ArticleCard :msg="item"> </ArticleCard>
             </div>
                  <!-- <el-row>
                    <el-col :span="24">
                      <div>
                        <el-radio-group v-model="radio1">
                          <el-radio-button label="综合"></el-radio-button>
                          <el-radio-button label="最新"></el-radio-button>
                          <el-radio-button label="热门"></el-radio-button>
                        </el-radio-group>
                      </div>
                    </el-col>
                  </el-row> -->

                  <!-- <el-row class="SearchList">
                    <el-col :span="18" class="item">
                      <div class="title">文章标题</div>
                      <div class="content">文章内容</div>
                      <div>
                        <el-link icon="el-icon-view" disabled>19万+</el-link>
                        <el-link icon="el-icon-thumb" disabled>532</el-link>
                        <el-link icon="el-icon-chat-line-square" disabled
                          >78</el-link
                        >
                      </div>
                    </el-col>

                    <el-col :span="6" class="itemImg">
                      <img src="@/assets/img/vip.png" alt="" width="110px" />
                    </el-col>
                  </el-row> -->

                </el-tab-pane>

                <!-- <el-tab-pane label="博客" name="second">
                  <el-row>
                    <el-col :span="24">
                      <div>
                        <el-radio-group v-model="radio1">
                          <el-radio-button label="综合"></el-radio-button>
                          <el-radio-button label="最新"></el-radio-button>
                          <el-radio-button label="热门"></el-radio-button>
                        </el-radio-group>
                      </div>
                    </el-col>
                  </el-row> -->

                  <!-- <el-row class="SearchList">
                    <el-col :span="18" class="item">
                      <div class="title">文章标题</div>
                      <div class="content">文章内容</div>
                      <div>
                        <el-link icon="el-icon-view">19万+</el-link>
                        <el-link icon="el-icon-thumb">532</el-link>
                        <el-link icon="el-icon-chat-line-square">78</el-link>
                      </div>
                    </el-col>

                    <el-col :span="6" class="itemImg">
                      <img src="@/assets/img/vip.png" alt="" width="110px" />
                    </el-col>
                  </el-row>
                </el-tab-pane> -->

                <!-- <el-tab-pane label="用户" name="third">
                  <el-row class="SearchList">
                    <el-col :span="3" class="itemImg">
                      <img src="@/assets/img/vip.png" alt="" width="50px" />
                    </el-col>

                    <el-col :span="17" class="item">
                      <div class="title">用户姓名</div>

                      <div>
                        <el-link icon="el-icon-view" disabled>原创</el-link>
                        <el-link icon="el-icon-thumb" disabled>点赞</el-link>
                        <el-link icon="el-icon-chat-line-square" disabled
                          >阅读</el-link
                        >
                      </div>
                      <div class="content">用户简介</div>
                    </el-col>
                    <el-col :span="4">
                      <el-button round>关注</el-button>
                    </el-col>
                  </el-row>
                </el-tab-pane> -->

                <!-- <el-tab-pane label="专栏" name="fourth">
                  

                  <el-row class="SearchList">
                    <el-col :span="18" class="item">
                      <div class="title">文章标题</div>
                      <div class="content">文章内容</div>
                      <div>
                        <el-link icon="el-icon-view">19万+</el-link>
                        <el-link icon="el-icon-thumb">532</el-link>
                        <el-link icon="el-icon-chat-line-square">78</el-link>
                      </div>
                    </el-col>

                    <el-col :span="6" class="itemImg">
                      <img src="@/assets/img/vip.png" alt="" width="110px" />
                    </el-col>
                  </el-row>
                </el-tab-pane> -->
              </el-tabs>
            </el-col>
          </el-row>
        </div>
      </el-main>

      <el-aside width="300px">
        <A></A>
        <B></B>

    
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import ArticleCard from "@/components/card/ArticleCard.vue";
import B from "./card/b.vue"
import A from "./card/a.vue"
import { getArticle } from "@/api/article";
export default {
  data() {
    return {
      activeName: "first",
      page: {
        findMsg: null,
        pageNumber: 1,
      },
      
      article: [],
    };
  },
  components: {
    A,B,ArticleCard
    
  },
  created() {
    this.page.findMsg=this.$route.query.searchInfo
    getArticle(this.page).then((res) => {
      this.article = res.data;
      
    });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.el-container {
  background: rgb(227, 225, 225);
}

/* el-main */
.el-main {
   background: rgb(255, 251, 251);

  margin-right: 10px;
}
.item {
  /* background: rgb(103, 239, 107); */
  height: 130px;
}
.itemImg {
  /* background: rgb(96, 34, 34); */
  height: 130px;
  text-align: center;
  line-height: 130px;
}
.itemImg img {
  display: inline-block;
  vertical-align: middle;
}

.SearchList {
  background: rgb(249, 249, 249);
}

.title {
  font-size: 20px;
  font-weight: bold;
  height: 28px;
  width: 80%;
}

.content {
  font-size: 14px;
  color: rgb(99, 99, 99);
  width: 80%;
}

/* el-aside */
.el-aside {
  background: rgb(255, 251, 251);
}

 
</style>